<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml" class="translated-ltr"
      xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="cssloader::cssloader(title)">
</head>

<body>
<script type="text/javascript" src="/js/axios.min.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/vue-resource.min.js"></script>
<link type="text/css" href="../static/layui/css/layui.css"/>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<!-- header -->
<header th:replace="component/header::header(${user})">

</header>
<!-- end header -->
<!-- main content -->
<main class="main main--breadcrumb">
    <!-- breadcrumb -->
    <div class="breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <ul class="breadcrumb__wrap">
                        <li class="breadcrumb__item"><a href="#"><span style="vertical-align: inherit;"><span
                                style="vertical-align: inherit;">[[${index}]]</span></span></a></li>
                        <li class="breadcrumb__item breadcrumb__item--active"><span
                                style="vertical-align: inherit;"><span
                                style="vertical-align: inherit;">[[title]]</span></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- end breadcrumb -->

    <div class="container">
        <div class="row" id="app">
            <div class="col-12 col-md-5 col-lg-4 col-xl-3">
                <!-- nav -->
                <div class="sidebox">
                    <h4 class="sidebox__title"><span style="vertical-align: inherit;"><span
                            style="vertical-align: inherit;">设置相关兴趣</span></span></h4>

                    <div class="sidebox__search">
                        <input type="text" class="filter__input" placeholder="搜索相关兴趣" v-model="keyword">
                        <button type="button" v-on:click="searchHobby">
                            <i class="icon ion-ios-search"></i>
                        </button>
                    </div>
                    <div class="sidebox__nav">点击设置相关兴趣（话题）</div>
                    <ul class="post__tags sidebox__nav" id="hobbyName">
                        <a v-for="hobby in hobbies" v-on:click="select(hobby.id)"
                           v-bind:class="{'selected':hobby.selected}">
                            <span style="vertical-align: inherit;"><span style="vertical-align: inherit;">{{hobby.hname}}</span></span>
                        </a>
                    </ul>
                </div>
                <!-- end nav -->
            </div>

            <div class="col-12 col-md-7 col-lg-8 col-xl-9">
                <form class="form">
                    <div class="row">
                        <div class="col-12">
                            <h2 class="form__title"><span style="vertical-align: inherit;"><span
                                    style="vertical-align: inherit;">发布动态</span></span></h2>
                        </div>

                        <div class="col-12">
                            <div class="form__group">
                                <label for="title" class="form__label"><span style="vertical-align: inherit;"><span
                                        style="vertical-align: inherit;">动态标题：</span></span></label>
                                <input name="title" id="title" type="text" class="form__input" placeholder="输入动态标题"
                                       v-model="title">
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form__group">
                                <label for="content" class="form__label"><span
                                        style="vertical-align: inherit;">动态内容：</span></label>
                                <textarea name="content" id="content" class="form__textarea" placeholder="动态内容"
                                          v-model="content"></textarea>
                            </div>
                        </div>

<!--                        <div class="col-12 col-xl-6">
                            <div class="form__group">
                                <label for="filepath" class="form__label"><span style="vertical-align: inherit;">
                                    <span style="vertical-align: inherit;">上传图片：</span></span>
                                </label>
                                <input name="filepath" id="filepath" type="file" accept="image/*" class="form__input"
                                       placeholder="上传动态配图">
                            </div>
                        </div>
                        <div class="col-12 col-xl-6">
                            <div class="form__group">
                                <button class="form__btn" type="button" v-on:click="uploadImg" style="top: 18px">
                                    <span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">上传图片</span></span></span>
                                </button>
                            </div>
                        </div>
                        <div class="col-12">
                            <img alt="这里是描述图片" id="upload_img" src="/img/upload.jpg"
                                 style="max-width: 70%;margin-bottom: 20px;">
                        </div>-->

                        <div class="col-12">
                            <div class="form__group">
                                <label for="location" class="form__label"><span style="vertical-align: inherit;"><span
                                        style="vertical-align: inherit;">所在位置：</span></span></label>
                                <input name="location" id="location" type="text" class="form__input"
                                       placeholder="输入所在位置" v-model="address">
                            </div>
                        </div>

                        <div class="col-12">
                            <button class="form__btn" type="button" v-on:click="publishShare">
                                <span><span style="vertical-align: inherit;"><span
                                        style="vertical-align: inherit;">发布动态</span></span></span>
                            </button>
                        </div>
                    </div>
                </form>
                <!-- end form -->
            </div>

        </div>
    </div>

    <script th:inline="javascript">
        new Vue({
            el: '#app',
            data: {
                keyword: '',
                hobbies: [],
                related_hobby: '',
                // 右侧
                title: '',
                content: '',
                address: '',
                imgurl: '',
                hobbyid: '',
                account: [[${user.account}]],
                publisherimg: [[${user.imgurl}]],
                publisher: [[${user.nickname}]]
            },
            methods: {
                uploadImg: function (event) {
                    var param = new FormData();
                    var fileInput = document.getElementById("filepath");
                    var filepath = fileInput.files[0];
                    if (filepath == null) {
                        layer.confirm("请您先选择图片！", {title: '提示信息', icon: 1})
                    } else {
                        param.append("file", filepath);
                        this.$http.post('/upload', param, {emulateJSON: true}).then(function (res) {
                            if (res.status === 200) {
                                layer.alert("上传成功", {icon: 6});
                                this.imgurl = "/upload/" + res.data.data;
                                document.getElementById("upload_img").setAttribute("src", this.imgurl);
                            } else {
                                layer.alert(res.status, {icon: 2});
                            }
                        }, function (res) {
                            console.log(res.status);
                        });
                    }
                },
                searchHobby: function (event) {
                    this.$http.get('/hobby/search', {params: {hname: this.keyword}}).then(function (res) {
                        if (res.status === 200) {
                            console.log(res);
                            var hobbies = res.data.data;
                            for (var i = 0; i < hobbies.length; i++) {
                                hobbies[i]["selected"] = false;
                                if (i === 3) {
                                    document.getElementById('hobbyName').append();
                                }
                            }
                            this.hobbies = hobbies;
                        }
                    }, function (res) {
                        console.log(res.status);
                    });
                },
                select: function (hobbyid) {
                    for (var i = 0; i < this.hobbies.length; i++) {
                        if (this.hobbies[i].id === hobbyid) {
                            this.hobbies[i].selected = true;
                            this.related_hobby = this.hobbies[i].hname;
                            this.hobbyid = hobbyid;
                        } else {
                            this.hobbies[i].selected = false;
                        }
                    }
                },
                publishShare: function (event) {
                    this.$http.post('/share/add', {
                        hobbyid: this.hobbyid,
                        related_hobby: this.related_hobby,

                        title: this.title,
                        content: this.content,
                        address: this.address,
                        imgurl: this.imgurl,

                        account: this.account,
                        publisherimg: this.publisherimg,
                        publisher: this.publisher
                    }, {emulateJSON: true}, true).then(function (res) {
                        layer.msg('发布动态成功', {icon: 6});
                        window.setTimeout(function () {
                            window.location.reload();
                        }, 3000);//毫秒
                    }, function (res) {
                        console.log(res.status);
                    });
                }
            }

        })

    </script>
</main>
<!-- end main content -->

</body>
<div th:replace="jsloader::jsloader"></div>
</html>